<template>
<view class="draft">
	
	<!-- <u-navbar bgColor='#4871C0' :titleStyle="{ color: '#FFF'}" title="我的发布" leftIconColor="#FFF"
		@rightClick="rightClick" :autoBack="true"  >
	</u-navbar> -->
	
	<u-transition :show="true" mode="fade">
		
		<view class="dateSelect" :class="dateShow?'activeDateSelect':''">
			<view style="display: inline-block;"  @click="dateShowEvent">
				<u-icon name="arrow-down" :label='time' labelPos='left' space='10rpx' ></u-icon>
			</view>
		</view>
		<view class="dateSelectSunk">1111</view>
	
		<view class="newsList" v-if="!(listData.length==0||listData==null)">
			<view v-for="(item,index) in listData" class="newsItem" :class="item.diagram.length > 3 ? 'moreImg':''" @tap.stop="gotoNewsDetail(item.id)">
				<view v-if='item.diagram.length > 3 '>
					<view class="newsText">
						{{item.title}}
					</view>
					<view class="imgBox">
						<view class="imgItem" v-for="(i,arrI) in 3">
							<image :src="item.diagram[arrI]" mode="widthFix" ></image>
							<!-- <image :src="item.diagram[arrI]" mode="widthFix" @click="previewImage(arrI,index,3)"></image> -->
						</view>
					</view>
					<view class="personalMsg">
					<!-- 	<view class="personalMsgImg">
							<image :src="item.avatar" mode="widthFix"></image>
						</view> -->
						<view class="time">
						<!-- 	<text>{{item.nickname}}</text>
							<text class="line"></text> -->
							<text>{{item.createtime}}</text>
						</view>
					</view>
				</view>
				
				<view  v-else-if='!(item.video==""||item.video==null)'>
					<view class="bunkItem">
						<view class="newsR">
							<video class="video" id="videoId" title="" :controls="true"  :enable-play-gesture='true' :src="item.video" :poster='item.video_first' :initial-time='0.01'>
							</video>
						</view>
						<view class="newsText">
							{{item.title}}
						</view>
						<view class="personalMsg">
						<!-- 	<view class="personalMsgImg">
								<image :src="item.avatar" mode="widthFix"></image>
							</view> -->
							<view class="time">
							<!-- 	<text>{{item.nickname}}</text>
								<text class="line"></text> -->
								<text>{{item.createtime}}</text>
							</view>
						</view>
					</view>
				</view>
		
				<view v-else-if='item.diagram.length < 3 ' style="display: flex;">
					<view class="newsL">
						<view class="newsText">
							{{item.title}}
						</view>
						<view class="personalMsg">
					<!-- 		<view class="personalMsgImg">
								<image :src="item.avatar" mode="widthFix"></image>
							</view> -->
							<view class="time">
							<!-- 	<text>{{item.nickname}}</text>
								<text class="line"></text> -->
								<text>{{item.createtime}}</text>
							</view>
						</view>
					</view>
					<view class="newsR" v-if="item.diagram.length > 0 && item.diagram.length < 3">
						<image :src="item.diagram[0]" mode="widthFix" ></image>
						<!-- <image :src="item.diagram[0]" mode="widthFix" @click="previewImage(0,index,1)"></image> -->
					</view>
					
					
				</view>
				
			
			</view>
			
			
		<!-- <u-loadmore :status="status" @loadmore='isLastPage'/> -->
		
		</view>
		<u-empty
			v-else
			mode="list"
			icon="http://cdn.uviewui.com/uview/empty/list.png"
			marginTop='400rpx'
		>
		</u-empty>
	</u-transition>
	
	<!-- <u-datetime-picker
		:show="dateShow"
		v-model="value1"
		mode="year-month"
	></u-datetime-picker> -->
	
	<u-picker :show="dateShow" :columns="columns" :closeOnClickOverlay="true"
		:defaultIndex='defaultIndex'
		@close='closeDate' @cancel='closeDate' @confirm='chackValie'></u-picker>

	<myTabBar :list='tabList' :currentIndex="3"></myTabBar>
	
</view>
</template>

<script>
import myTabBar from '@/component/customTabBar/customTabBar.vue'
import {
	footprintMine
} from '@/api/schoolEventApi.js'
export default {
	components:{
		myTabBar
	},
	data() {
		return {
			tabList:[
				{title:"首页",url:"/pages/tabbar-5-detial/schoolEvent/schoolEvent",icon:"home"},
				{title:"待办",url:"/pages/tabbar-5-detial/backlog/backlog",icon:"chat"},
				{title:"草稿",url:"/pages/tabbar-5-detial/draft/draft",icon:"edit-pen"},
				{title:"我的发布",url:"/pages/tabbar-5-detial/myPublish/myPublish",icon:"file-text"},
				{
					title: "清外足迹",
					url: "/pages/tabbar-5-detial/schoolEvent/footConfig",
					icon: "file-text"
				}
			],
			dateShow:false,
			columns: [[]],
			listData: [],
			time:2022,
			defaultIndex:[0]
		}
	},
	created() {
		this.getListData();
		
		let date = new Date();
		let year = date.getFullYear();
		this.time = year;
		let index = 0; 
		for(var i = 1996;i<=year;i++){
			this.columns[0].push(i);
			index++;
		}
		this.defaultIndex = [index-1];
	},
	methods: {
		//预览轮播图
		previewImage:function(current,index,num){
			console.log(current,index,num)
			let arr = [];
			for (let i = 0; i < num; i++) {
				arr.push(this.listData[index].diagram[i]);
			}
			//uniapp预览轮播图
			uni.previewImage({
				current: current,
				urls: arr //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
			})
		},
		getListData(){
			let params = {
				time: this.time,
				status: 2
			};
			uni.showLoading({
				title: '加载中'
			});
			footprintMine(params).then(res => {
				console.log(res)
				uni.hideLoading();
				if(res.code == 1) {
					res.data.list.data.forEach((item,index)=>{
						if(item.diagram==null) item.diagram = [];
					})
					this.listData = res.data.list.data;
					// this.lastPage = res.last_page;
					console.log(this.listData)
				} else {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon:"none"
					});
				}
			})
		},
		delEvent(e){
			uni.showModal({
			    title: '删除确认',
			    content: '是否删除该数据？',
				success: function (res) {
			        if (res.confirm) {
			            console.log('用户点击确定');
			        } else if (res.cancel) {
			            console.log('用户点击取消');
			        }
			    }
			});
		},
		gotoNewsDetail(id){
			uni.navigateTo({
				url: '/pages/tabbar-5-detial/schoolEvent/newsDetail/newsDetail?pageType=1&id='+id
			});
		},
		dateShowEvent(){
			this.dateShow = true;
		},
		closeDate(){
			this.dateShow=false;
		},
		chackValie(e){
			console.log(e)
			this.time = e.value[0];
			this.getListData();
			this.dateShow=false;
		},
		
	}
}
</script>

<style>
.dateSelect.activeDateSelect /deep/.u-icon__icon{
	transform: rotate(-180deg);
}
.dateSelect /deep/.u-icon__icon{
	transition: .3s;
}
.draft{
	background-color: #f8f8f8;
	position: absolute;
	width: 100%;
	top: 0;
	bottom: 0;
}
.draft /deep/.u-swipe-action-item__right__button__wrapper{
	background-color: #fc8b00 !important;
}
.dateSelect{
	background-color: #fff;
	padding: 30rpx 26rpx;
	position: fixed;
	width: 100%;
	z-index: 999;
}
.dateSelectSunk{
	padding: 30rpx 26rpx;
	overflow: visible;
}




image{
		width: 100%;
	}
	video{
		width: 100%;
	}
	.newsList{
		padding: 20rpx;
		background-color: #fff;
		margin-top: 20rpx;
	}
	.newsItem{
		display: flex;
		border-bottom: 1px dashed #eee;
		padding-bottom: 26rpx;
		padding-top: 26rpx;
	}
	.newsItem>view{
		width: 100%;
	}
	.moreImg{
		flex-direction: column;
	}
	.imgBox{
		display: flex;
		margin-top: 20rpx;
	}
	.imgItem{
		background-color: #f0f0f0;
		width: 33.33%;
		height: 200rpx;
		margin-left: 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.imgItem:first-child{
		margin-left: 0;
	}

	
	.bunkItem{
		display: block;
	}
	.bunkItem .newsR{
		height: auto;
		width: 100%;
		margin-bottom: 20rpx;
	}
	.bunkItem .newsTime{
		margin-top: 20rpx;
	}
	.newsL{
		display: flex;
		flex-direction: column;
		flex: 1;
		justify-content: space-between;
		/* align-items: center; */
	}
	.newsText{
		
		overflow: hidden;
		text-overflow: ellipsis;  /* 超出部分省略号 */
		word-break: break-all;  /* break-all(允许在单词内换行。) */  
		display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
		-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
		-webkit-line-clamp: 2; /* 显示的行数 */
	}
	.newsTime{
		margin-top: 40rpx;
		color: #aaa;
		font-size: 28rpx;
	}
	.newsR{
		width: 300rpx;
		height: 200rpx;
		background-color: #f0f0f0;
		border-radius: 16rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	.newsR image{
		width: 100%;
	}
	.add-btn{
		width: 80rpx;
		height: 80rpx;
		position: fixed;
		bottom: 220rpx;
		right: 40rpx;
		background: url('../../../static/img/tabbar/add.png') no-repeat;
		background-position: center;
		background-size: cover;
		z-index: 9999;
	}
	
	.personalMsg{
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}
	.personalMsgImg{
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		overflow: hidden;
		background-color: #F8F8F8;
	}
	.line{
		margin: 0 16rpx;
		width: 2rpx;
		height: 20rpx;
		background-color: #aaa;
		display: inline-block;
	}
	.time{
		color: #aaa;
		font-size: 28rpx;
		/* padding-left: 28rpx; */
		/* margin-left: 10rpx; */
	}

</style>
